<template>
    <!-- 顶部导航菜单 -->
    <el-menu 
      :default-active="activeTab" 
      mode="horizontal"
      class="header-menu"
     
    >
      <el-menu-item 
        v-for="item in tabs" 
        :key="item" 
        :index="item"
      >{{ item }}</el-menu-item>
    </el-menu>
  
    <!-- 数据表格区域 -->
    <el-table 
      :data="tableData"
      border
      style="width: 100%"
      height="600px"  <!-- 固定高度触发滚动条 -->
      class="data-table"
    >
      <!-- 动态生成表格列 -->
      <el-table-column 
        v-for="col in columns" 
        :key="col.prop"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :align="col.align"
      >
        <!-- 自定义表头 -->
        <template #header="{ column }">
          <span v-if="col.required" class="required-asterisk">*</span>
          {{ column.label }}
          <el-icon v-if="col.hasCheck" class="check-icon"><Check /></el-icon>
        </template>
      </el-table-column>
  
      <!-- 底部合计行 -->
      <template #append>
        <div class="summary-row">
          <span>合计</span>
          <span v-for="(item, index) in summaryData" :key="index">{{ item }}</span>
        </div>
      </template>
    </el-table>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { Check } from '@element-plus/icons-vue'
  
  // 导航栏数据
  const activeTab = ref('历史报价')
  const tabs = ['商品信息', '历史报价', '快速粘贴', '按库存开单', '...']
  
  // 表格列配置
  const columns = [
    { prop: 'code', label: '商品编码', width: 120, required: true },
    { prop: 'scan', label: '扫码', width: 80, hasCheck: true },
    { prop: 'name', label: '商品名称', width: 150 },
    { prop: 'warehouse', label: '仓库', width: 100 },
    { prop: 'stock', label: '即时库存', width: 100, align: 'right' },
    { prop: 'unit', label: '单位', width: 80 },
    { prop: 'quantity', label: '数量', width: 100, required: true, align: 'right' },
    { prop: 'suggestPrice', label: '建议报价', width: 110, align: 'right' },
    { prop: 'actualPrice', label: '实际报价', width: 110, align: 'right' },
    { prop: 'historyPrice', label: '历史报价', width: 110, align: 'right' },
    { prop: 'taxPrice', label: '含税单价', width: 110, align: 'right' },
    { prop: 'vat', label: '增值税', width: 100, align: 'right' }
  ]
  
  // 表格数据
  const tableData = ref([]) // 填充实际数据
  const summaryData = ref({}) // 合计行数据
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .header-menu {
    margin-bottom: 20px;
    background: #fff;
  }
  
  .data-table {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
  
  :deep(.el-table__header th) {
    background-color: #f5f7fa;
  }
  
  :deep(.el-table__row td) {
    border-color: #ebeef5;
  }
  
  .required-asterisk {
    color: #f56c6c;
    margin-right: 4px;
  }
  
  .check-icon {
    color: #67c23a;
    margin-left: 8px;
  }
  
  .summary-row {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background: #f8f8f9;
  }
  </style>